{
 "cells": [
  {
   "cell_type": "markdown",
   "id": "533dd758-2834-4fa8-b7cc-b5a1ab74256c",
   "metadata": {},
   "source": [
    "# ipywidgets 8"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "b1c209d4-8dfe-45fd-9b55-b69f8d5e0963",
   "metadata": {},
   "source": [
    "### Currently in release candidate stage, but coming *very* soon!"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "174e8fce-147d-4470-bbd8-5bacd35f3f55",
   "metadata": {},
   "source": [
    "#### Full changelog in the link below\n",
    "[ipywidgets 8 changelog](https://github.com/jupyter-widgets/ipywidgets/blob/master/docs/source/changelog.md)"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "8d1c293b-9eee-4355-af38-34a997efaf44",
   "metadata": {},
   "source": [
    "#### In this session will cover some of the main changes in ipywidgets 8 for users. These changes are also documented in [here](https://ipywidgets.readthedocs.io/en/latest/user_migration_guides.html)\n",
    "\n",
    "#### If you are a widgets developer, please refer to [the migration guide](https://ipywidgets.readthedocs.io/en/latest/migration_guides.html)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "a0881c40-c4b0-434d-a1a4-857cba969601",
   "metadata": {},
   "outputs": [],
   "source": [
    "import ipywidgets as widgets"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "a89234b0-b0a0-46d3-8567-97465d69dff4",
   "metadata": {},
   "outputs": [],
   "source": [
    "widgets.__version__"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "5581d1e1-e089-4076-941e-872229071f4d",
   "metadata": {},
   "source": [
    "#### Latest documentation here: https://ipywidgets.readthedocs.io/en/latest/index.html"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "a407df5a-d525-46f7-adf2-fac35c2b9d8a",
   "metadata": {},
   "source": [
    "<span style=\"color: red; font-weight: bold\">Python 2.x and <=3.5 are not supported in ipywidgets 8.</span>"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "b35372a7-dc80-48f5-9c03-f7d59c52c59e",
   "metadata": {
    "tags": []
   },
   "source": [
    "#### New styling attributes support for core widgets:\n",
    "1. `font-family` \n",
    "2. `font-size`\n",
    "3. `font-style`\n",
    "4. `font-variant`\n",
    "5. `text-color`\n",
    "6. `text-decoration`"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "dbe91b98-bb7a-4292-8df0-efbc49fdfef0",
   "metadata": {},
   "outputs": [],
   "source": [
    "from ipywidgets import Valid, Text, ToggleButton, Checkbox, Button, HTML, HTMLMath, Label, Textarea, Password, Combobox, HBox, VBox\n",
    "\n",
    "checkbox = Checkbox(description='Option A', style=dict(background='lightblue'))\n",
    "valid = Valid(value=False, style=dict(background='lightblue'))\n",
    "togglebutton = ToggleButton(description=\"Option A\", style=dict(\n",
    "    background='lightblue',\n",
    "    font_family=\"Times New Roman\",\n",
    "    font_size=\"20px\",\n",
    "    font_style=\"italic\",\n",
    "    font_variant=\"small-caps\",\n",
    "    font_weight=\"bold\",\n",
    "    text_color=\"red\",\n",
    "    text_decoration=\"underline\",\n",
    "))\n",
    "\n",
    "button = Button(description=\"Button\", style=dict(\n",
    "    button_color=\"lightblue\",\n",
    "    font_family=\"Times New Roman\",\n",
    "    font_size=\"20px\",\n",
    "    font_style=\"italic\",\n",
    "    font_variant=\"small-caps\",\n",
    "    font_weight=\"bold\",\n",
    "    text_color=\"red\",\n",
    "    text_decoration=\"underline\",\n",
    "))\n",
    "\n",
    "html = HTML(value='Some HTML text',style=dict(\n",
    "    background=\"lightblue\",\n",
    "    font_size=\"30px\",\n",
    "    text_color=\"red\"\n",
    "))\n",
    "\n",
    "htmlmath = HTMLMath(value='Some HTML text and math: $$\\int \\sqrt{x^2} dx$$',style=dict(\n",
    "    background=\"lightblue\",\n",
    "    font_size=\"30px\",\n",
    "    text_color=\"red\"\n",
    "))\n",
    "\n",
    "label = Label(value=\"Label text\", style=dict(\n",
    "    background='limegreen',\n",
    "    font_family=\"Times New Roman\",\n",
    "    font_size=\"20px\",\n",
    "    font_style=\"italic\",\n",
    "    font_variant=\"small-caps\",\n",
    "    font_weight=\"bold\",\n",
    "    text_color=\"red\",\n",
    "    text_decoration=\"underline\",\n",
    "))\n",
    "\n",
    "textarea = Textarea(value='Text area text',style=dict(\n",
    "    background=\"lightblue\",\n",
    "    font_size=\"30px\",\n",
    "    text_color=\"red\"\n",
    "))\n",
    "\n",
    "text = Text(value='Text area text',style=dict(\n",
    "    background=\"lightblue\",\n",
    "    font_size=\"30px\",\n",
    "    text_color=\"red\"\n",
    "))\n",
    "\n",
    "password = Password(value='Text area text',style=dict(\n",
    "    background=\"lightblue\",\n",
    "    font_size=\"30px\",\n",
    "    text_color=\"red\"\n",
    "))\n",
    "\n",
    "combobox = Combobox(value='option B', options=['option A', 'option B', 'Another option'], style=dict(\n",
    "    background=\"lightblue\",\n",
    "    font_size=\"30px\",\n",
    "    text_color=\"red\"\n",
    "))\n",
    "\n",
    "\n",
    "VBox([\n",
    "    HBox([combobox, password, text, textarea]),\n",
    "    HBox([label, htmlmath, html, button]),\n",
    "    HBox([togglebutton, valid, checkbox]),\n",
    "])"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "674f2b43-a0af-4184-88fa-9664d71f01bf",
   "metadata": {},
   "source": [
    "#### Layout widgets now support setting each border side independently:\n",
    "1. `border_top`\n",
    "2. `border_right`\n",
    "3. `border_bottom`\n",
    "4. `border_left`"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "22dd3054-3c92-4377-b708-542bd7f4db4e",
   "metadata": {},
   "outputs": [],
   "source": [
    "from ipywidgets import Button, Layout\n",
    "btn = Button(layout=Layout(border_left=\"5px solid green\", border_right=\"5px solid blue\", border_top=\"5px solid yellow\", border_bottom=\"5px solid red\"))\n",
    "btn"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "331dfbc1-aab3-4e11-858f-d3c8c66d9793",
   "metadata": {},
   "source": [
    "#### New slider implementation based on `nouislider` with support for range dragging."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "1aed6d31-834e-48f4-b196-526d6de2de39",
   "metadata": {},
   "outputs": [],
   "source": [
    "from ipywidgets import IntRangeSlider\n",
    "slider = IntRangeSlider(min=0, max=100)\n",
    "slider"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "5069c5a9-3511-405c-b408-21108772baf0",
   "metadata": {},
   "source": [
    "#### New implementation of `FileUpload` widget\n",
    "* New representation of `.value` traitlet\n",
    "* Files represented as `memoryview` (can be saved to file system)\n",
    "* The `.data` traitlet has been removed.\n",
    "* The `.metadata` traitlet has been removed."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "87b55325-56e1-4d88-b266-0f30bf5fc764",
   "metadata": {},
   "outputs": [],
   "source": [
    "from ipywidgets import FileUpload\n",
    "\n",
    "fileupload = FileUpload(multiple=True)\n",
    "fileupload"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "594948f5-32ad-464e-8429-31a52e40b5a2",
   "metadata": {},
   "outputs": [],
   "source": [
    "# fileupload.value"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "296e0340-322a-4611-87bc-11e477563fb1",
   "metadata": {},
   "outputs": [],
   "source": [
    "# Text file\n",
    "# import codecs\n",
    "# print(codecs.decode(fileupload.value[0].content))"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "18f077d9-d133-4d9e-9f0c-8816a3b85f9c",
   "metadata": {},
   "outputs": [],
   "source": [
    "# from ipywidgets import Image\n",
    "# Image(value=fileupload.value[1].content.tobytes())"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "709e5005-1569-4232-a618-5bde081247db",
   "metadata": {},
   "source": [
    "#### Tooltips available on all DOM widgets"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "efaeb9cb-a34a-4a81-94a2-b4b3329fbe81",
   "metadata": {},
   "outputs": [],
   "source": [
    "fileupload = FileUpload(tooltip='Upload a file because this tooltip says so')\n",
    "fileupload"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "26d3119f-374a-4e11-a96f-c7692838f760",
   "metadata": {},
   "source": [
    "#### ErrorWidget fallback when widget models or views fail."
   ]
  },
  {
   "cell_type": "markdown",
   "id": "2b912ea3-da50-4579-820e-4bdc3996d918",
   "metadata": {},
   "source": [
    "#### Add `Stacked` widget"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "c7bf1da3-f281-483a-962c-cd02be83a207",
   "metadata": {},
   "outputs": [],
   "source": [
    "from ipywidgets import Stacked, IntSlider\n",
    "button = Button(description='Click here')\n",
    "slider = IntSlider(value=100, min=0, max=100)\n",
    "stacked = Stacked([button, slider], selected_index=0)\n",
    "stacked  # will show only the button\""
   ]
  },
  {
   "cell_type": "markdown",
   "id": "21bcd147-9644-46d4-bb7b-54d6669611b0",
   "metadata": {},
   "source": [
    "#### New `TagsInput` widget"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "c3810042-70bd-4c9e-9328-44cea0332163",
   "metadata": {},
   "outputs": [],
   "source": [
    "from ipywidgets import TagsInput\n",
    "\n",
    "tagsinput = TagsInput(allowed_tags=\"One Two Three Four Five\".split())\n",
    "tagsinput"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "a00f2834-6340-4207-96cb-9cbd3cf08e10",
   "metadata": {},
   "source": [
    "#### New `DatetimePicker` widget"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "2324621d-1d24-414d-b181-c2f8624e3821",
   "metadata": {},
   "outputs": [],
   "source": [
    "from ipywidgets import DatetimePicker\n",
    "import datetime\n",
    "dt = DatetimePicker()\n",
    "dt"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3 (ipykernel)",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.9.13"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 5
}
